<template>
	<view>
		<view class="content">
			<!-- 问候语 -->
			<view class="text">
				<view class="text1">
					<text>{{text1}}</text>
				</view>
				<view class="text2">
					<text>{{text2}}</text>
				</view>

			</view>

			<!-- 设置 -->
			<view class="setting">
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<!-- 个人中心 -->
			<view class="userInfo">
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<!-- 语音播报 -->
			<view class="speechSound">
				<image src="../../static/logo.png" mode=""></image>
			</view>

			<!-- 功能 -->
			<view class="function">

				<view class="healthRecord">
					<text>健康记录</text>
				</view>

				<view class="medicalReminder">
					<text>医药提醒</text>

				</view>

				<view class="communityHelp">
					<text>社区求助</text>

				</view>

				<view class="emergencyCall">
					<text>紧急呼叫</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text1: '系统每日问候',
				text2: 'xxx大爷您好，开启新的一天生活，祝您愉快'

			}
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		height: 100vh;
		width: 100vw;
		background-color: #77B307;
		position: relative;
	}

	.text {
		height: 30%;
		width: 80%;
		background-color: #ffffff;
		position: relative;
		margin: 0 auto;
		text-align: left;
		top: 3%;
		border-radius: 5%;
		/* overflow:scroll;  //超过用滚动条显示 */
		/* text-overflow: clip; */
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;/*第几行裁剪*/			
		-webkit-box-orient:vertical;
		/* white-space: nowrap; */
	}

	.setting {
		height: 100rpx;
		width: 100rpx;
		background-color: #007AFF;
		border-radius: 50%;
		position: absolute;
		/* float: right; */
		z-index: 1000;
		top: 1%;
		right: 2%;
	}

	.setting image {
		max-width: 100%;
		max-height: 100%;
		object-fit: cover;
		border-radius: 50%;
	}

	.userInfo {
		height: 100rpx;
		width: 100rpx;
		background-color: #007AFF;
		border-radius: 50%;
		position: absolute;
		/* float: right; */
		z-index: 1000;
		top: 1%;
		right: 16%;
	}

	.userInfo image {
		max-width: 100%;
		max-height: 100%;
		object-fit: cover;
		border-radius: 50%;
	}

	.speechSound {
		height: 120rpx;
		width: 120rpx;
		background-color: #007AFF;
		border-radius: 50%;
		position: absolute;
		/* float: right; */
		z-index: 1000;
		top: 23%;
		right: 15%;
	}

	.speechSound image {
		max-width: 100%;
		max-height: 100%;
		object-fit: cover;
		border-radius: 50%;
	}


	.text1,
	.text2 {
		font-size: 50rpx;
		font-weight: bold;
		letter-spacing: 6rpx;
		line-height: 2em;
		padding-left: 20rpx;
		padding-right: 20rpx;


	}

	.text1 {
		text-align: left;
	}

	.text2 {
		text-align: justify;
		text-indent: 15%;
	}


	.function {}
</style>
